<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        *{margin: 0;padding: 0;}
        body{min-width: 700px}
        .header,
        .footer{border: 1px solid #333;background: #f99;text-align: center;height: 50px;line-height: 50px;}
        .sub,
        .main,
        .extra{float: left;min-height: 130px;line-height: 130px;text-align: center;}
        .sub{margin-left: -100%;width: 200px;background: #9ff;}
        .extra{margin-left: -220px;width: 220px;background: #cff;}
        .main{width: 100%}
        .main-inner{margin:0 220px 0 200px;min-height: 130px;background: #cf9;word-break: break-all;}
        .footer{clear: both}
    </style>
</head>
<body>
    <!--头部-->
    <div class="header">
        <h4>header</h4>
    </div>
    <!--主体-->
    <div class="main">
        <div class="main-inner">
            <h4>main</h4>
        </div>
    </div>
    <!--左侧-->
    <div class="sub">
        <h4>sub</h4>
    </div>
    <!--右侧-->
    <div class="extra">
        <h4>extra</h4>
    </div>
    <!--底部-->
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>